<template>
	<view class="container">
		<image src="/static/login/nav_back_602.png" class="return_img" @tap="backToppage()"></image>
		<view class="login_headTitle">
			<text class="login_headTitle_big">密码登陆</text>
		</view>
		<!-- 输入框 -->
		<view class="login_inputBox">
			<view class="login_inputBox_inner">
				<view class="inner_titleBox">
					<text class="paddword">手机号</text>
				</view>
				<view class="inner_iptBox">
					<input type="text" placeholder="请输入手机号" placeholder-class="placStyle" v-model="userphone" @input="isFinalallInfo()">
				</view>
			</view>
			<view class="login_inputBox_inner">
				<view class="inner_titleBox">
					<text class="paddword" space="emsp">密 码</text>
				</view>
				<view class="inner_iptBox">
					<input type="password" placeholder="请输入密码" placeholder-class="placStyle" v-model="password" @input="isFinalallInfo()">
				</view>
			</view>
		</view>
		<!-- 协议 -->
		<view class="login_agreement">
			<view class="login_agreement_emptyBox" v-if="!ifSelect" @tap='selectRadio'></view>
			<image src="/static/login/img_605.png" v-else class="select_img" @tap='selectRadio'></image>
			<text>登录注册即代表你同意</text>
			<text class="agreement_content">《xx用户协议》</text>
		</view>
		<!-- 登陆按钮 -->
		<view class="login_submit" @tap="requestLogin()">
			<text :style="{backgroundColor:loginDisabled?'#e3e3e3':'#0EAE64'}">登陆</text>
		</view>
		<!-- 注册，账号登陆 -->
		<view class="login_register">
			<text class="now_login" @tap="navigateToForgetpass()">忘记密码了</text>
		</view>
	</view>
</template>

<script>
	import {login} from '@/apis/request.js'
	export default {
		data() {
			return {
				ifSelect:false,
				userphone:'',
				password:'',
				loginDisabled:true
			};
		},
		methods:{
			// 勾选协议框
			selectRadio(){
				this.ifSelect = !this.ifSelect;
				this.isFinalallInfo();
			},
			//返回上一页面
			backToppage(){
				uni.navigateBack({
					delta:1
				});
			},
			//检测是否完成所有信息
			isFinalallInfo(){
				if(this.userphone == '' || this.password == '' || !this.ifSelect){
					this.loginDisabled=true;
					return ;
				}
				this.loginDisabled=false;
			},
			//发起登录请求
			requestLogin(){
				if(this.loginDisabled){
				   return ;
				}
				if(this.userphone.length!=11 || isNaN(this.userphone)){
					uni.showToast({
						icon:'none',
						title:'手机号输入不正确'
					});
					return ;
				}
				if(this.password==''){
					uni.showToast({
						icon:'none',
						title:'输入密码'
					});
					return ;
				}
				this.$http({
					url:login,
					method:"POST",
					data:{
						phone:this.userphone,
						password:this.password
					},
					header:{
						'content-type':'application/x-www-form-urlencoded'
					}
				})
				.then(res=>{
					// console.log(res)
					console.log(res[1].data.data);
					if(res[1].data.status=='200'){
						uni.showToast({
							title:'登录成功'
						});
						uni.setStorageSync('userInfo',res[1].data.data);
						setTimeout(()=>{
						    uni.reLaunch({
						    	url:'../../index/index'
						    });
						},500);
					}else{
						uni.showToast({
							icon:'none',
							title:res[1].data.msg
						});
					}
					
				})
				.catch(error=>{
					console.log(error)
				})
			},
			//跳转到忘记密码
			navigateToForgetpass(){
				uni.navigateTo({
					url:'../../forgetPasword/forgetPasword'
				})
			}
		}
	}
</script>

<style lang="scss">
.placStyle{
	color: #888888;
	font-size: 28rpx;
	margin-left: 30rpx;
}
.return_img{
	width: 27rpx;
	height: 41rpx;
	position: fixed;
	left: 30rpx;
	top: 80rpx;
}
.login_headTitle{
	padding-left: 100rpx;
	margin-top: 190rpx;
	&_big{
		font-size: 59rpx;
		color: #0EAE64;
		margin-bottom: 43rpx;
	};
}
.login_inputBox{
	margin-top: 179rpx;
	padding:  0 89rpx 0 93rpx;
	&_inner{
		display: flex;
		height: 57rpx;
		align-items: center;
		justify-content: center;
		margin-top: 64rpx;
		.inner_titleBox{
			text{
				color: #222222;
				font-size: 32rpx;
			}
		}
		.inner_iptBox{
			width: 473rpx;
			height: 57rpx;
			border-bottom: 2rpx solid #D2D2D2;
			display: flex;
			align-items: center;
			input{
				width: 100%;
				height: 100%;
				padding-left: 20rpx;
			}
		}
	}
}
.login_agreement{
	display: flex;
	padding-left: 93rpx;
	margin-top: 34rpx;
	align-items: center;
	&_emptyBox{
		width: 25rpx;
		height: 25rpx;
		border: 2rpx solid #cccccc;
		margin-right: 16rpx;
	}
	.select_img{
		width: 25rpx;
		height: 25rpx;
		margin-right: 16rpx;
	}
	text{
		color: #888888;
		font-size: 24rpx;
	}
	.agreement_content{
		color: #FF7547;
	}
	
}
.login_submit{
	display: flex;
	justify-content: center;
	margin-top: 154rpx;
	text{
		display: block;
		width: 569rpx;
		height: 96rpx;
		background-color: #e3e3e3;
		color: #FFFFFF;
		text-align: center;
		line-height: 96rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		border-radius: 10rpx;
	}
}
.login_register{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 32rpx;
	text{
		color: #222222;
		font-size: 26rpx;
	}
	.now_login{
		color: #FF7447;
	}
}
</style>
